<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <style>
        .export-btn-container {
            position: absolute;
            right: 0;
            top: 8px;
        }

        .export-btn-container button {
            margin-right: 15px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">单位:个</span>
                        <h5>标签总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">78</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">单位:个</span>
                        <h5>对象总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">4</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">单位:个</span>
                        <h5>API总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">4</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">单位:个</span>
                        <h5>云计算资源总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">3</h1>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>类目标签统计</h5>
                        <button id="export-object-stats" class="btn btn-default btn-sm pull-right">导出</button>
                    </div>
                    <div class="ibox-content">
                        <div id="vertical-bar-chart" style="width:100%;height:270px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>对象统计</h5>
                        <button id="export-object-stats" class="btn btn-default btn-sm pull-right">导出</button>
                    </div>
                    <div class="ibox-content">
                        <div id="horizontal-bar-chart" style="width:100%;height:270px;"></div>
                    </div>
                </div>
            </div>          
        </div>
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active ibox-title"><a data-toggle="tab" href="#tab-1" aria-expanded="true">标签使用次数</a>
                        </li>
                        <li class="ibox-title"><a data-toggle="tab" href="#tab-2" aria-expanded="false">API使用次数</a>
                        </li>
                        <li class="ibox-title"><a data-toggle="tab" href="#tab-2" aria-expanded="false">已公开标签被授权个数</a>
                        </li>
                        <li class="ibox-title export-btn-container">
                            <button id="export-all-data" class="btn btn-default btn-sm">导出</button>
                        </li>
                    </ul>
                    <div class="ibox-content tab-content">
                        <table class="table table-hover no-margins">
                            <thead>
                                <tr>
                                    <th>排行</th>
                                    <th>标签名称</th>
                                    <th>使用热度</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><i class="fa fa-clock-o"></i>1</td>
                                    <td>证件号码</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 15</td>
                                    <td><small>已上线</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-clock-o"></i>2</td>
                                    <td>教育水平</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 3</td>
                                    <td><span class="label label-warning">已下线</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-clock-o"></i>3</td>
                                    <td>职业</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 5</td>
                                    <td><small>已上线</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-clock-o"></i>4</td>
                                    <td>姓名</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 12</td>
                                    <td><small>已上线</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-clock-o"></i>5</td>
                                    <td>年龄</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 3</td>
                                    <td><small>已上线</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-clock-o"></i>6</td>
                                    <td>性别</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 2</td>
                                    <td><span class="label label-warning">已下线</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
         </div>
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    
    <th:block th:include="include :: sparkline-js" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
        $(function() {            
            var verticalChartDom = document.getElementById('vertical-bar-chart');
            var verticalChart = echarts.init(verticalChartDom);
            var verticalOption = {
                tooltip: {},
                grid:{
                    x:30,
                    x2:40,
                    y2:24,
                    height:200
                },
	        calculable : true,
                xAxis: {
	            type : 'category',
	            boundaryGap : true,
                    data: ['', '标签列表', '', '基础信息']
                },
                yAxis: {
                    name: '数量',
	            type : 'value',
                    data: [0, 10, 20, 30]
                },
                series: [{
                    type: 'bar',
                    data: [0, 78, 0, 16],
                    barWidth: 40,
                    label: {
                      show: true,
                      position: 'inside'
                    },
                    itemStyle: {
                        color: '#00FF00' // 设置柱状图的颜色为绿色,
                    }
                }]
            };
            verticalChart.setOption(verticalOption);

            var horizontalChartDom = document.getElementById('horizontal-bar-chart');
            var horizontalChart = echarts.init(horizontalChartDom);
            var horizontalOption = {
                tooltip: {},
                grid:{
                    x:30,
                    x2:40,
                    y2:24,
                    height:200
                },
                xAxis: {
                    type: 'value',
                    data: [0, 5, 10, 15, 20]
                },
                yAxis: {
                    name: '对象名称标签数',
                    type: 'category',
                    data: ['法人', '企业', '写字楼']
                },
                series: [{
                    type: 'bar',
                    data: [18, 9, 6],
                    barWidth: 40,
                    label: {
                      show: true,
                      position: 'inside'
                    },
                    itemStyle: {
                        color: '#0000FF' // 设置柱状图的颜色为蓝色
                    }
                }]
            };
            horizontalChart.setOption(horizontalOption);
	});
    </script>
</body>
</html>
